#app{
    width:100%;max-width: 750px;position: fixed;
    bottom:0;top:0;left:50%;right:0;transform: translate(-50%,0);transition: all .5s;
}
.loadingDiv,.loadingDiv .flex,#cropSection,#proSection,#qrGuide,.nextGuide{
	position: absolute;left:0;right:0;bottom:0;top:0;
}
.loadingDiv{
    bottom:0;background-color: rgba(255,255,255,1);color:#c2c2c2;font-size:.36rem;letter-spacing:.02rem;
    z-index:99999;
}
.loadingDiv .flex{
	justify-content: center;align-items: center;
}
.loadingIcon{
  width:1.26rem;display: block;margin:0 auto .2rem;animation:loadIcon 1s linear 0s infinite normal;
}
@keyframes loadIcon {
  0%{
    transform:rotateZ(0deg)
  }
  100%{
    transform:rotateZ(360deg)
  }
}

#audio_control{
  z-index: 99998;width:.6rem;height:.6rem;background: url('../img/audioBg.png') center center no-repeat;background-size:cover;
  right:.3rem;top:1.02rem;text-align: center;line-height: .6rem;
}
#audio_control img{
  width:.33rem;text-align: center;line-height: .6rem;vertical-align: sub;
}
#audio_control img.run{
  animation:audIconRun 5s linear 0s infinite normal forwards;
  animation-play-state:running;
}
@keyframes audIconRun {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

#upload{
	top:0;left:-999rem;
}



#firstPage .wpr{
  z-index:9;bottom:0;left:0;width:100%;color:#ebca7b;font-size:.29rem;padding-top:.2rem;
  text-align: center;line-height: 1.4;
}
#firstPage var{
  letter-spacing: .03rem;display: inline-block;
}
#firstPage .tit{right:0;left:0;top:0;z-index:2;}
#firstPage .t1_wpr{
  text-align: center;width: 100%;margin:.26rem 0 .18rem;
}
#firstPage .t2_wpr{
  text-align: right;width: 100%;
}
#firstPage .t1{width:6.69rem;}
#firstPage .t2{width:3.97rem;margin-right:.96rem;}
#joinNum{
  background-color: #fae8a2;color:#cc403c;line-height: 1.2;font-size: .26rem;
  margin:0 .1rem;padding:0 .1rem;border-radius: .15rem;}
#targetNum{margin-left: .1rem;}
.chooseBtn{
	display: block;width:4.06rem;background-color:#fff;text-align: center;color:#cf4440;line-height: .96rem;font-size: .42rem;
	border-radius: .6rem;margin:.12rem auto .4rem;
}
#theme_bg{
	z-index:222;
}
#cropLayer{width:63.73%;left:18.16%;top:2.68rem;}
#cropLayer .wpr{width:100%;left:0;top:0;bottom:0;overflow: hidden;z-index:266;}
.defaultPic .wpr{overflow: hidden;width:4.73rem;height:4.73rem;}
/* .defaultPic .background{background-color: transparent;opacity: 0;position: absolute;left: 0;top: 0;z-index: 215;width:100%;height:100%;} */
#dropArea{
  z-index: 288;transition: all .5s;
}
#dropArea.defaultPic{
}

.themeHead{position: relative;z-index: 1;}

/* 选择主题 */
.styleChoose .wpr{width:100%;top:0;padding-top:.34rem;}
.styleChoose .wpr>div{width:auto;margin-left:.36rem;white-space: nowrap;overflow: hidden;overflow-x: scroll;}
.styleChoose .wpr>div>.item{font-size: .3rem;color:#e5d585;}
.styleChoose .wpr>div>.item var{
  display: inline-block;line-height: 1.5;vertical-align: middle;
}

.styleChoose .flex{justify-content: space-around;}
.styleChoose .item{display: inline-block;margin-right: .44rem;width:1.12rem;height:1.36rem;background-color: #e8462d;border-radius: .12rem;color:#fff;text-align: center;line-height: 1.26rem;}

#cropCanvas{left:80%;top:0;}
/* width:1.22rem;height:1.22rem; */
.ecode{
  display:block;width:1.22rem;height:1.22rem;border:.06rem #fff solid;border-radius: .2rem;box-sizing: border-box;
  background-color: #ffe3b3;border-radius:.1rem;text-align: center;
  z-index:222;
}

.nextGuide{position: fixed;z-index: 666;display: flex;align-items: center;background-color: rgba(0,0,0,.4);justify-content: center;}
.nextGuide .wpr{width:4.14rem;background-color: #fff;border-radius: .2rem;}
.nextGuide .p1{line-height:.48rem;font-size: .32rem;color:#666;text-align: center;padding:.34rem 0;border-bottom:1px #e5e5e5 solid;}
.nextGuide .confirm{display: flex;text-align: center;width: 100%;justify-content: center;}
.nextGuide .confirm span{font-size: .32rem;color:#cf453f;line-height: .88rem;}
.nextGuide .wpr .flow{width:1.14rem;right:.16rem;top:-.1rem;}
.nextGuide .wpr .paw{width:.5rem;right:0;transform: translate(50%,0);top:.58rem;}
.nextGuide .wpr .paw2{width:.5rem;left:0;transform: translate(-50%,0) rotate(180deg);top:.58rem;}
.nextGuide .wpr img{width: 100%;}

#qrGuide{border:1px blue solid;box-sizing: border-box;overflow: hidden;overflow-y: scroll;}
#qrGuide .wpr{
  background:url('../img/qr_guide_bg.jpg') 0 0 repeat;background-size:.84rem .49rem;
  overflow: hidden;text-align: center;font-size: .3rem;color: #fff;
}
#qrGuide .return{
  font-size: .26rem;line-height: .66rem;border-radius: 2rem;width:2rem;border:.02rem #fff1a5 solid;color:#fff1a5;
}
#qrGuide img{
  margin:.15rem auto;
}
#qrGuide p{
  line-height: 1.6;margin:.45rem auto .16rem;
}
#qrGuide .btn{
  display: block;width:4.45rem;line-height: .96rem;border-radius: 2rem;text-align: center;background-color: #fff;color:#cf4440;font-size: .36rem;
  margin: .8rem auto .5rem;
}
#proSection{z-index:444;background-color:#fff;overflow: hidden;overflow-y: scroll;}
#proSection .content .wpr{top:0;bottom:0;left:0;right:0;display: flex;justify-content: center;width:100%;}
#proSection .content .wpr span{display: block;margin:.5rem .3rem;width:3.1rem;line-height: .96rem;text-align: center;color:#fff;font-size: .36rem;background-color: #e23536;border-radius: 4rem;}


/* animate  */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.bounceInDown {
  animation-name: bounceInDown;
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}
